<template>
  <div>
    <h1 ref="h" id="myH1">学习ref和$refs获取dom</h1>
    <button @click="handleClick">获取h1元素</button>
  </div>
</template>

<script>
/**
 * 1. 给标签添加ref属性 ref="yyy"
 * 2. 恰当时机 this.$refs.yyy获取目标标签
 */
export default {
  methods: {
    handleClick() {
      /**
       * 全局搜索符合这个选择器 找到第一个返回 全局找不一定是你这个组件的 除非id属性 通过id去找
       * document.querySelector('h1')
       * 如果要在组件内获取对应的dom元素，优先选择用ref属性去获取
       */
      console.log(this.$refs.h, document.querySelector("#myH1"));
      this.$refs.h.style.color = "red";
    },
  },
};
</script>

<style>
</style>
